import React from "react";
import Input from "../../components/Input";
import type { FieldBaseType } from "../../type";

export default function NumberInput({
  field,
  isValid,
  onChange,
}: {
  field: FieldBaseType<number>;
  isValid: boolean;
  onChange: (v: number | null) => void;
}) {
  const {
    value: propsValue,
    defaultValue,
    placeholder,
    suffix,
    meta,
    disabled,
  } = field;

  const value = String((propsValue || "") ?? defaultValue);

  const handler = (v: string) => onChange(parseFloat(v) || null);

  return (
    <Input
      placeholder={placeholder}
      invalid={!isValid}
      disabled={disabled}
      value={value}
      type="number"
      min={meta?.min}
      max={meta?.max}
      suffix={suffix}
      onChange={handler}
    />
  );
}
